import 'dart:async';
import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_learn_vi/src/bean/bean_user.dart';
import 'package:flutter_learn_vi/src/common/user_helper.dart';
import 'package:flutter_learn_vi/src/page/mine/mine_addres_persion_info_page.dart';
import 'package:flutter_learn_vi/src/page/mine/settings_page.dart';
import 'package:flutter_learn_vi/src/utils/navigator_utils.dart';

/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 2020/12/4.
///
/// 可关注公众号：我的大前端生涯   获取最新技术分享
/// 可关注网易云课堂：https://study.163.com/instructor/1021406098.htm
/// 可关注博客：https://blog.csdn.net/zl18603543572
///
/// 代码清单
///代码清单
class MineSliverHeaderV2Widget extends StatefulWidget {
  //Stream 控制器用来这里的局部刷新功能
  final StreamController<double> streamController;

  //logo 使用的
  final StreamController<double> logoStreamController;

  //图片填充类型（刚开始滑动时是以宽度填充，拉开之后以高度填充）
  final BoxFit fitType;
  final TabController tabController;

  MineSliverHeaderV2Widget(
      {this.streamController,
      this.tabController,
      this.logoStreamController,
      this.fitType = BoxFit.fitWidth});

  @override
  _MineSliverHeaderWidgetState createState() => _MineSliverHeaderWidgetState();
}

class _MineSliverHeaderWidgetState extends State<MineSliverHeaderV2Widget> {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<double>(
      //绑定流
      stream: widget.streamController.stream,
      //初始化的数据 这里用作图片放大的高度
      initialData: 0.0,
      builder: (BuildContext context, AsyncSnapshot<double> snapshot) {
        //构建需要更新的 Widget
        return buildSliverAppBar(snapshot.data);
      },
    );
  }

  Widget buildSliverAppBar(double extraHeight) {
    UserBean userBean = UserHelper.getInstance.userBean;
    return SliverAppBar(
      actions: [
        InkWell(
          onTap: () {
            NavigatorUtils.pushPage(
              context,
              SettingsPage(),
            );
          },
          child: Container(
            padding: EdgeInsets.only(right: 16),
            child: Icon(Icons.settings),
          ),
        ),
      ],
      title: StreamBuilder(
        stream: widget.logoStreamController.stream,
        initialData: pi / 2,
        builder: (BuildContext context, AsyncSnapshot<double> snapshot) {
          return Transform(
            alignment: Alignment.center,
            transform: Matrix4.identity()..rotateX(snapshot.data),
            child: Row(
              children: [
                ClipOval(
                  child: Image.asset(
                    "assets/images/2.0x/app_icon_yuxi.png",
                    width: 33,
                    height: 33,
                    fit: BoxFit.fill,
                  ),
                ),
                SizedBox(
                  width: 12,
                ),
                Text(
                  "${userBean.reamName}",
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF444444),
                  ),
                )
              ],
            ),
          );
        },
      ),
      //5.1.2小节中有对这一块的属性配置说明
      floating: false,
      pinned: true,
      snap: false,
      elevation: 0.0,
      //展开的高度
      expandedHeight: 110 + extraHeight,
      //第二部分 AppBar下的内容区域
      flexibleSpace: buildFlexibleSpaceBar(extraHeight),
    );
  }

  FlexibleSpaceBar buildFlexibleSpaceBar(double extraHeight) {
    return FlexibleSpaceBar(
      //背景
      //配置的是一个widget也就是说在这里可以使用任意的
      //Widget组合 在这里直接使用的是一个图片
      background: Stack(
        children: [
          Container(
            //缩放的图片
            width: MediaQuery.of(context).size.width,
            height: 180 + extraHeight,
          ),
          buildPositioned(),
        ],
      ),
    );
  }

  Positioned buildPositioned() {
    return Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      height: 88,
      child: Stack(
        children: [
          // Positioned(
          //   top: 32,
          //   left: 0,
          //   right: 0,
          //   bottom: 0,
          //   child: ClipRRect(
          //     borderRadius: BorderRadius.only(
          //       topLeft: Radius.circular(10),
          //       topRight: Radius.circular(10),
          //     ),
          //     child: Container(
          //       color: Colors.white,
          //     ),
          //   ),
          // ),
          Positioned(
            top: 0,
            left: 16,
            child: InkWell(
              onTap: () {
                ///[PersionInfoPage]暂里不使用
                NavigatorUtils.pushPage(
                    context,
                    MineAddresPersionInfoPage(
                      userBean: UserHelper.getInstance.userBean,
                    ));
              },
              child: Container(
                width: 66,
                height: 66,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(40)),
                  border: Border.all(color: Colors.white, width: 4),
                  boxShadow: [
                    BoxShadow(
                      offset: Offset(2, 2),
                      color: Colors.black12,
                      blurRadius: 2,
                    ),
                    BoxShadow(
                      offset: Offset(-2, 2),
                      color: Colors.black12,
                      blurRadius: 2,
                    )
                  ],
                ),
                child: Hero(
                  tag: "test",
                  child: ClipOval(
                    child: buildImage(),
                  ),
                ),
              ),
            ),
          ),
          buildPersionPostion(),
        ],
      ),
    );
  }

  Widget buildImage() {
    String url = UserHelper.getInstance.mineBean.logoUrl;
    if (url == null || url.length == 0) {
      return Image.asset(
        "assets/images/2.0x/app_icon_yuxi.png",
        fit: BoxFit.fill,
      );
    }
    return CachedNetworkImage(
      imageUrl: url,
      fit: BoxFit.fill,
    );
  }

  Positioned buildPersionPostion() {
    UserBean userBean = UserHelper.getInstance.userBean;
    return Positioned(
      top: 10,
      left: 88,
      right: 0,
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                margin: EdgeInsets.only(left: 16, right: 16),
                child: Text(
                  "${userBean.reamName}",
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF444444),
                  ),
                ),
              ),
              Container(
                alignment: Alignment.center,
                padding: EdgeInsets.only(
                  left: 6,
                  right: 6,
                  bottom: 2,
                ),
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.all(
                    Radius.circular(2),
                  ),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Image.asset(
                      userBean.sex == "M"
                          ? "assets/images/2.0x/my_man_icon.png"
                          : "assets/images/2.0x/my_woman_icon.png",
                      width: 10,
                      height: 10,
                    ),
                    SizedBox(
                      width: 2,
                    ),
                    Text(
                      userBean.sex == "M" ? "男" : "女",
                      style: TextStyle(
                        fontSize: 12,
                        color: Color(0xFF444444),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
          SizedBox(
            height: 8,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                margin: EdgeInsets.only(
                  left: 16,
                ),
                child: Text(
                  "${userBean.department}",
                  style: TextStyle(
                    fontSize: 14,
                    color: Color(0xFF444444),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(
                    left: 16,
                  ),
                  child: Text(
                    "${userBean.userPost}",
                    style: TextStyle(
                      fontSize: 14,
                      color: Color(0xFF444444),
                    ),
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}
